/**
 * Created by yangyxu on 10/16/15.
 */

$.define('fily.ui.Box', {
    events: [

    ],
    props: {
        x: {
            set: function (value){
                this._x = value;
                if(this.dom && value){
                    this.dom.style.left = value + 'px';
                }
            }
        },
        y: {
            set: function (value){
                this._y = value;
                if(this.dom && value){
                    this.dom.style.top = value + 'px';
                }
            }
        },
        width: {
            set: function (value){
                this._width = value;
                if(this.dom && value){
                    this.dom.style.width = value + 'px';
                }
            }
        },
        height: {
            set: function (value){
                this._height = value;
                if(this.dom && value){
                    this.dom.style.height = value + 'px';
                }
            }
        },
        zIndex: {
            set: function (value){
                this._height = value;
                if(this.dom && value){
                    this.dom.style.zIndex = value;
                }
            }
        },
        style: {
            set: function (value){
                this._style = value;
                if(this.dom && value){
                    this.dom.style.cssText += value;
                }
            }
        },
        skin: {
            set: function (value){
                this._skin = value;
                if(this.dom && value){
                    this.dom.className = 'fily-ui-box ' + value;
                }
            }
        },
        content: {
            set: function (value){
                this._content = value;
                if(this.dom && value){
                    this.render(view, { parent: this.dom });
                }
            }
        }
    },
    view: {
        props: {
            'class': 'fily-ui-box'
        }
    },
    methods: {
        init: function (){
            this.dom.evt('click', function (e){
                $.e.fix(e).stop();
            });
        },
        show: function (dom, view, width, height){
            var _pos = dom.pos(),
                _x = _pos.x,
                _y = _pos.y + _pos.h,
                _width = (width || _pos.w) - 2,
                _height = height,
                _view;

            if(view){
                this.dom.h('');
                view.parent = this.dom;
                _view = new view.type(view);
            }

            var _posCss = 'left: '+ _x + 'px;top:' + _y + 'px;width:' + _width + 'px;';
            if(_height!==undefined){
                _posCss += 'height:'+ _height + 'px;';
            }else {
                _posCss += 'height:auto;max-height:200px;';
            }
            this.dom.style.cssText += _posCss;
            this.dom.attr('show', true);
            return _view;
        },
        hide: function (){
            this.dom.attr('show', false);
        }
    }
});

$.define('fily.ui.FormItem', {
    events: ['change','clickInput'],
    props: {
        name: '',
        title: '',
        comType: 'Input',
        type: 'text',
        icon: '',
        placeholder: ''
    },
    view: {
        'class': 'fily-form-item',
        content: [
            {
                props: {
                    'class': 'form-item-head'
                },
                content: '{title}'
            },
            {
                name: 'form-item-body',
                props: {
                    'class': 'form-item-body'
                }
            }
        ]
    },
    methods: {
        init: function (args){
            this.initContent();
            this.setValue(args.value);
            this.setText(args.text);
        },
        initContent: function (){
            var _temp = '';
            switch(this.get('comType')){
                case 'Input':
                    _temp = '<input type="'+this.get('type')+'" name="'+this.get('name')+'" placeholder="'+this.get('placeholder')+'" />';
                    break;
                case 'Select':
                    _temp = '<input type="'+this.get('type')+'" name="'+this.get('name')+'" placeholder="'+this.get('placeholder')+'" /><span class="icon fa '+this.get('icon')+'"></span>';
                    break;
                case 'Label':
                    _temp = this.get('text');
                    break;
            }
            this.views['form-item-body'].h(_temp);
            this.initContentEvent();
        },
        initContentEvent: function (){
            var _body = this.views['form-item-body'],
                _self = this;

            switch(this.get('comType')){
                case 'Input':

                    break;
                case 'Select':
                    this._input = _body.fc();
                    this._input.evt('click', function (e){
                        $.e.fix(e).stop();
                        _self.fire('clickInput', e, this);
                    });
                    break;
                case 'Label':
                    this._label = _body;
                    break;
            }
        },
        setValue: function (value){
            switch(this.get('comType')){
                case 'Input':
                case 'Select':
                    if(value&&this._input){
                        this._input.value = value;
                    }
                    break;
                case 'Label':
                    break;
            }

           this._value = value;
        },
        setText: function (value){
            switch(this.get('comType')){
                case 'Input':
                case 'Select':
                    if(value&&this._input){
                        this._input.value = value;
                    }
                    break;
                case 'Label':

                    this._label.innerHTML = value;
                    break;
            }

            this._text = value;
        }
    }
});

$.define('fily.ui.ActivePanel', {
    props: {
        skin: {
            set: function (value){
                this._skin = value;
                this.dom.className = 'fily-active-panel ' + value;
            }
        },
        id: '',
        name: '',
        active: {
            value: true,
            set: function (value){
                this._active = value;
                if(value){
                    this.views['icon'].className = 'icon fa fa-caret-down';
                }else {
                    this.views['icon'].className = 'icon fa fa-caret-right';
                }
                this.dom.attr('active', value);
            },
            get: function (){
                return this._active===undefined ? true : this._active;
            }
        }
    },
    view: {
        props: {
            'class': 'fily-active-panel',
            active: 'true'
        },
        content: [
            {
                'class': 'panel-head',
                content: [
                    {
                        tag: 'span',
                        name: 'icon',
                        props: {
                            'class':'icon fa fa-caret-down'
                        },
                        events: {
                            'click': 'onIconClick'
                        }
                    },
                    {
                        tag: 'span',
                        props: {
                            'class': 'title'
                        },
                        content: '{name}'
                    }
                ]
            },
            {
                'class': 'panel-body',
                'name': 'panel-body'
            }
        ]
    },
    methods: {
        init: function (args){

        },
        onIconClick: function (e){
            if(this.get('active')){
                this.set('active', false);
            }else {
                this.set('active', true);
            }
        }
    }
});

$.define('fily.ui.Menu', {
    events: ['click'],
    props: {
        skin: {
            set: function (value){
                this._skin = value;
                this.dom.className = 'fily-menu ' + value;
            }
        },
        items: {
            set: function (value){
                this._items = value;
                this.setItems(value);
            }
        }
    },
    view: {
        tag: 'ul',
        'class': 'fily-menu'
    },
    methods: {
        init: function (args){

        },
        setItems: function (data){
            this._data = data;
            this.dom.h('');
            for(var i= 0, _len = data.length; i<_len; i++){
                this.addItem(data[i]);
            }
        },
        addItem: function (value){
            var _ul = this.dom, _self = this;
            var _li = _ul.adElm('li').h(value.name).attr('draggable', 'true').attr('data-value', value.value);
            _li.onselectstart = function() {
                return false;
            };
            _li.ondragstart = function(ev) {
                /*拖拽开始*/
                //拖拽效果
                ev.dataTransfer.effectAllowed = "move";
                ev.dataTransfer.setData("data", JSON.stringify(value));
                ev.dataTransfer.setDragImage(ev.target, 0, 0);
                return true;
            };
            _li.ondragend = function(ev) {
                /*拖拽结束*/
                ev.dataTransfer.clearData("text");
                return false
            };
            _li.evt('click', function (e){
                var e = $.e.fix(e), _e = e.t;
                _self.fire('click', {
                    text: _e.h(),
                    value: _e.attr('data-value')
                });
            });
            this._items.push(value);
        },
        filter: function (callback){
            var _ul = this.dom;
            for(var i= 0, _len = this._data.length; i<_len; i++){
                callback.call(this, this._data[i], _ul.chn(i));
            }
        }
    }
});

$(function (){
    $.popBox = new fily.ui.Box({ parent: $DB });
    $(window).evt('click', function (e){
        var e = $.e.fix(e);
        //console.log();
        if($.popBox){
            $.popBox.hide();
        }
        e.stop();
    });
});